<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
    .header{
        color: aqua;
        background: orange;

    }
    .left{
        color: blue;
        flex: 2;
        background: green;

    }
    .main{
        color: red;
        flex: 8;
        background: pink;
    }
    h1{
        margin: 0;
        padding: 0;
    }
    .cont{
        display: flex;
    }
    </style>
    </head>
    <body>
        <div id="app">

            <router-view></router-view>
            <div class="cont">
                    <router-view name="left"></router-view>
                    <router-view name="main"></router-view>
            </div>
        </div>
        <script>

            var header = {
                template: '<h1 class="header">asd</h1>'
            }
            var leftBox = {
                template: '<h1 class="left">leftBox</h1>'
            }
            var mainBOx = {
                template: '<h1 class="main">mainBOx</h1>'
            }

            var router = new VueRouter({
                routes: [
                    // {
                    //     path: '/',
                    //     component:header
                    // },
                    // {
                    //     path: '/left',
                    //     component:leftBox
                    // },
                    // {
                    //     path: '/main',
                    //     component:mainBOx
                    // },

                    {
                        path: '/',
                        components:{
                            'default':header,
                            'left': leftBox,
                            'main': mainBOx
                        }
                    }

                ]
            })

            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods:{

                },
                router
            })
        </script>
    </body>
</html>